„Webseiten sind keine Gesamtkunstwerke“ – Über modulare Webentwicklung, objektorientiertes CSS und Sinn & Unsinn von Sass

„Webseiten sind keine Gesamtkunstwerke“, schreibt Jens Grochtdreis im Abstract seines Workshops auf den JavaScript Days. Wir haben uns mit ihm darüber unterhalten, wie man Webseiten modularisiert, welche Rolle Sass dabei spielt und welche Entwicklungen sich derzeit in der JavaScript-Welt abspielen.

Entwickler: Im Abstract deines Workshops auf den JavaScript Days schreibst du, Webseiten seien modulare Systeme, und du zeigst, wie man eine Seite modular durchdenkt. Worauf kommt es dabei an?

Jens Grochtdreis: Bei der Erstellung von Modulen sollte man sich nicht an der Optik derselben orientieren, sondern an den Inhalten derselben. Denn die Arbeit beginnt im Frontend mit HTML. Mittels CSS kann ich viele unterschiedliche Optiken daraus erstellen. So kann ich aus einer Liste mal eine horizontale, mal eine vertikale Navigation in sehr unterschiedlichen Darstellungsformen machen. Das HTML bleibt dabei immer gleich. Deshalb sollte die Benennung des Moduls so generisch wie möglich sein. Also eher „Navigation“ oder „Teaser“, anstatt „horizontale, grüne Navigation“ oder „Hundefutter-Teaser“. Die Inhalte und Optiken kommen erst in einem zweiten und dritten Schritt.

Entwickler: Im Workshop geht es auch darum, wie man das CSS modular erstellt. Genügt es nicht, CSS als ein zentrales, monolithisches Artefakt zu sehen, das die Module einer Webseite mit einem einheitlichen Look & Feel versieht?

Jens Grochtdreis: Kann man machen. Das genügt sicherlich für viele kleine Projekte und einzelkämpfende Kollegen. Aber ich gehe immer davon aus, dass man als Selbständiger und vor allem als Agentur viele unterschiedliche Projekte hat, die oft mit den gleichen oder ähnlichen Modulen bestritten werden. Wenn man nun also diese Module isoliert und sich so sein eigenes „Bootstrap“ schafft, hat man viel Arbeit und vor allem viel Testingaufwände gespart.

Man kann sie dann immer wieder in neuer Zusammenstellung verwenden. Außerdem fällt so die Arbeit im Team leichter, denn jeder Entwickler ist nur für sein Modul zuständig. Deshalb liegt es im Eigeninteresse, das CSS in einzelnen Häppchen (Modulen) zu erstellen und von Projekt zu Projekt mitzunehmen, wenn sie gebraucht werden. Präprozessoren wie Sass sind da sehr hilfreich, aber nicht notwendig.

Sass, OOCSS, SMACSS, BEM…

Entwickler: À propos Sass. Die Kritik an Sass als Metasprache für CSS lautet ja häufig, dass durch den Einsatz eines Präprozessors der Entwicklungsprozess schwergewichtiger wird. Was denkst du über solche Einwände – berechtigt oder am Problem vorbei?

Jens Grochtdreis: Da man mit Sass in gewissem Umfang programmieren kann, sind Entwickler immer in der Gefahr, zu viel Energie in die „Vereinfachung“ des Entwicklungsprozesses zu stecken. Gerade zu Beginn meiner Beschäftigung mit Sass habe ich diesen Fehler oft genug selber gemacht. Alles musste in ein Mixin, das auch schon mal zehn Parameter hatte. Das war nicht handhabbar. Aber die Erstellung machte Spaß. Doch das war ja eigentlich nicht Ziel der Übung.

Ich kenne ein Projekt, bei dem ich den Aufbau der Sass-Files definitiv nicht verstehe. Da wird u.a. mit JSON gearbeitet und sehr viel in Mixins ausgelagert, die manchmal nur eine einzige Verwendung finden, aber genutzt werden, um einen einfachen Bezug zu Breakpoints zu bekommen. Solche Sass-Projekte sind am Ende von Quereinsteigern nicht einfach und nur unter großem Zeitaufwand zu verstehen. Ich habe den Eindruck, dass man sich damit weniger die Arbeit vereinfacht, als das eigene Ego streichelt.

In dieser Form finde ich Sass nur bedingt hilfreich. Aber ich möchte trotz allem nicht mehr auf Sass verzichten. Ich habe vor zwei Jahren einmal eine kleine Applikation – einen Adventskalender – ohne Sass erstellt. Es fühlte sich falsch und umständlich an.

Entwickler: Momentan werden Ansätze wie OOCSS, SMACSS und BEM diskutiert. Nehmen wir uns einmal OOCSS vor – Object-oriented CSS. Für welchen Einsatzzweck findest du OOCSS sinnvoll – wo eher nicht?

Jens Grochtdreis: OOCSS ist mehr eine grundlegende Skizze, wie man gedanklich an ein umfangreiches CSS herangeht und Module im HTML auszeichnet. Es ist nie ausführlich ausformuliert worden, inspirierte aber alle anderen Ansätze. Interessanter finde ich SMACSS und BEM.

Inhaltlich fand ich SMACSS schon immer Klasse, vor allem weil dessen „Erfinder“ Jonathan Snook seine Regeln nicht als absolute Gesetze, sondern als grobe Orientierungen verstanden hat. BEM wiederum hat den Vorteil, dass es ein striktes, logisches, stringentes System ist, das für große und sehr große Projekte optimiert ist. Es ist mittlerweile eine Art Industriestandard, der von sehr vielen Entwickler verstanden und befolgt wird. Das erleichtert das Verständnis eines Projektes, in das man hineinkommt.

Entwicklungen in der JavaScript-Welt

Entwickler: Die JavaScript-Szene hat den Ruf, besonders schnelllebig und fragmentiert zu sein. Mit TypeScript, Angular, React und Vue.js scheinen sich allerdings in den letzten Monaten doch einige Konstanten herauszukristallisieren. Können wir da so eine Art Konsolidierung der JavaScript-Welt beobachten?

Jens Grochtdreis: Ich denke schon, dass es eine Konsolidierung gibt. Es ist nur die Frage, wie lange diese anhält. Vor fünf Jahren hätte doch niemand gedacht, dass es mal Projekte gibt, die an jQuery vorbeiziehen. Mittlerweile gibt es ja schon Artikel darüber, wie ich für bestimmte Aufgaben Vue.js an Stelle von jQuery benutzen kann. Und da Angular und React von großen Unternehmen sind, die irgendwann evtl. eine vollkommen neue Richtung einschlagen, kann es sein, dass wir in fünf oder acht Jahren über ganz andere Frameworks sprechen. Aber das gehört zum Frontend dazu. Das macht den Job spannend.

Entwickler: Wenn du dir die aktuelle Szene der Webentwicklung anschaust – welchen Missstand würdest du gerne am schnellsten behoben sehen?

Jens Grochtdreis: Ich finde, es gibt immer noch zu viele Entwickler, die sich nicht dafür interessieren, ob ihre Webseiten und Applikationen in möglichst vielen Browsern funktionieren. Es gibt sogar große Webseiten, die es als okay ansehen, dass ihre Webseite nur im Chrome funktioniert.

Und ganz allgemein wünsche ich mir, dass das Verständnis für die technischen Möglichkeiten und Beschränkungen, mit denen wir umgehen müssen, endlich voll zu allen Designern und Kunden durchdringen. Ich habe leider noch immer zu viele negative Erfahrungen dahingehend, auch noch 2018.

Entwickler: Und welcher Trend interessiert dich persönlich momentan am meisten?   

Jens Grochtdreis: Ich interessiere mich nicht für Trends. Aber die Technik, mit der ich am ehesten endlich mal arbeiten möchte, sind CSS-Grids. Doch dafür müsste ich sicherlich erst einmal in einem Projekt alle Designer über die neuen Möglichkeiten aufklären. Und das ist bei diesem Thema alles andere als einfach. Noch ein Grund mehr, warum Designer und Entwickler möglichst eng zusammenarbeiten sollten.

Entwickler: Vielen Dank für dieses Interview!

 

Interviewt von: Hartmut Schlosser

Content-Stratege, IT-Redakteur, Storyteller – als Online-Teamlead bei S&S Media ist Hartmut Schlosser immer auf der Suche nach der Geschichte hinter der News. SEO und KPIs isst er zum Frühstück. Satt machen ihn kreative Aktionen, die den Leser bewegen. @hschlosser

 

 

Top Articles About HTML & CSS

Nichts mehr verpassen!